import React, { PureComponent } from 'react';

import { NoDataMaskC, MilepostC, NoDataC } from '../../../../comps';
import style from '../index.less';

class BuyRule extends PureComponent {
  constructor() {
    super();
    this.state = {
      controlNoData: false, // 三个参数如果缺一个显示暂无数据
      data1: [
        { name: '买入提交', date: '' },
        { name: '确认份额', date: '' },
        {
          name: '查看持仓',
          date: '',
          isGray: true,
        },
      ],
    };
  }

  setInfo = (info) => {
    const tmpInfo = JSON.parse(JSON.stringify(this.state.data1));
    tmpInfo[0].date = info?.buyDate ? info?.buyDate : '';
    tmpInfo[1].date = info?.confirmDate ? info?.confirmDate : '';
    tmpInfo[2].date = info?.haveHoldDate ? info?.haveHoldDate : '';
    this.setState({
      data1: tmpInfo,
    });
  };

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.info) !== JSON.stringify(this.props.info)) {
      this.setInfo(nextProps.info);
      const { buyDate, confirmDate, haveHoldDate } = nextProps.info ?? {};
      if (buyDate === undefined || confirmDate === undefined || haveHoldDate === undefined) {
        this.setState({
          controlNoData: true,
        });
      } else {
        this.setState({
          controlNoData: false,
        });
      }
    }
  }

  render() {
    const { info } = this.props;
    const { controlNoData } = this.state;
    return (
      <div style={{ position: 'relative' }}>
        <div className={style.fundInfo3}>{info === null ? <NoDataC /> : !controlNoData ? <MilepostC data={this.state.data1} type='view' isForBuyOrCallRule /> : <NoDataC />}</div>
        {info !== undefined ? null : <NoDataMaskC height='100%' title='请选择基金代码，加载数据' />}
      </div>
    );
  }
}

export default BuyRule;
